﻿@model IEnumerable<Domain.BLL.CategoryBLL>
@{
    var CatId = Request.QueryString["CatId"];
    var catid = "#idOfCat" + CatId;
}
<div id="HeaderFBTransparentAbove" style="width: 100%;">
      
      </div>

      <div id="HeaderSecondaryContainer" data-enableanimations="true">
        
        <div style="display:block;width:100%;" id="HeaderNavSecondary" role="navigation" style="width: 100%; max-width: 100%;">
            Chọn sản phẩm theo phân loại:
            @foreach (var cat in Model)
            {
                @(Html.ActionLink(@cat.CategoryName, "Index", "Products", new { catid = @cat.CategoryID, Id = 1 }, new { @class = "HeaderNoAccent HeaderLeaf", @style = "", @title = @cat.Description, @id = "idOfCat"+@cat.CategoryID}))
            }
            <script>
                $(document).ready(function () {
                    $("@catid").attr("class", "HeaderActTax accentBackgroundText");
                });
            </script>
            

        </div>
<!--
        <div style="display:block;width:100%;" id="HeaderNavSecondary" role="navigation" style="width: auto; max-width: none;">
            <a id="tIdHP" class="HeaderActTax accentBackgroundText" href="#" style="visibility: visible;">HP</a>            
            <a id="tIdDell" class="HeaderNoAccent HeaderLeaf" href="#" style="visibility: visible; left: 0px; opacity: 1;">Dell</a>
            <a id="tIdSony" class="HeaderNoAccent HeaderLeaf" href="#" style="visibility: visible; left: 0px; opacity: 1;">Sony</a>
            <a id="tIdAsus" class="HeaderNoAccent HeaderLeaf" href="#" style="visibility: visible; left: 0px; opacity: 1;">Asus</a>  
            <a id="tIdAcer" class="HeaderNoAccent HeaderLeaf" href="#" style="visibility: visible; left: 0px; opacity: 1;">Acer</a>
            <a id="tIdIBM" class="HeaderNoAccent HeaderLeaf" href="#" style="visibility: visible; left: 0px; opacity: 1;">IBM</a>                  
        </div> 
-->

        <!--div style="display:block;width:100%;" id="HeaderNavSecondaryDrop" role="navigation" style="width: auto; max-width: none;">
        <ul id="menu">
                <li>
                    Products
                    <ul>
                        <li>
                            Furniture
                            <ul> 
                                <li>Tables & Chairs</li>
                                <li>Sofas</li>
                                <li>Occasional Furniture</li>
                                <li>Childerns Furniture</li>
                                <li>Beds</li>
                            </ul>


                        </li>
                        <li>
                            Decor
                            <ul> 
                                <li>Bed Linen</li>
                                <li>Throws</li>
                                <li>Curtains & Blinds</li>
                                <li>Rugs</li>
                                <li>Carpets</li>
                            </ul>
                        </li>
                        <li>
                            Storage
                            <ul> 
                                <li>Wall Shelving</li>
                                <li>Kids Storage</li>
                                <li>Baskets</li>
                                <li>Multimedia Storage</li>
                                <li>Floor Shelving</li>
                                <li>Toilet Roll Holders</li>
                                <li>Storage Jars</li>
                                <li>Drawers</li>
                                <li>Boxes</li>
                            </ul>

                        </li>
                        <li>
                            Lights
                            <ul> 
                                <li>Ceiling</li>
                                <li>Table</li>
                                <li>Floor</li>
                                <li>Shades</li>
                                <li>Wall Lights</li>
                                <li>Spotlights</li>
                                <li>Push Light</li>
                                <li>String Lights</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    Stores
                    <ul>
                        <li>
                            <div id="template" class="k-content" style="padding: 10px;">
                                <h2>Around the Globe</h2>
                                <ol>
                                    <li>United States</li>
                                    <li>Europe</li>
                                    <li>Canada</li>
                                    <li>Australia</li>
                                </ol>
                                <img src="../../content/web/menu/map.png" alt="Stores Around the Globe" />
                                <button class="k-button">See full list</button>
                            </div>
                        </li>
                    </ul>
                </li>
                <li>
                    Blog
                </li>
                <li>
                    Company
                </li>
                <li>
                    Events
                </li>
                <li disabled="disabled">
                    News
                </li>
                
            </ul>

            
</div--></div>

<style scoped>
    #megaStore {
        width: 600px;
        margin: 30px auto;
        padding-top: 120px;
        background: url('../../content/web/menu/header.jpg') no-repeat 0 0;
    }
    #menu h2 {
        font-size: 1em;
        text-transform: uppercase;
        padding: 5px 10px;
    }
    #template img {
        margin: 5px 20px 0 0;
        float: left;
    }
    #template {
        width: 380px;
    }
    #template ol {
        float: left;
        margin: 0 0 0 30px;
        padding: 10px 10px 0 10px;
    }
    #template:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    #template .k-button {
        float: left;
        clear: left;
        margin: 5px 0 5px 12px;
    }
</style>
<script>
    $(document).ready(function () {
        $("#menu").kendoMenu({
            direction: "bottom",
        
        });
    });
</script>
        
